﻿@page "/animation"

<h3>Animation</h3>

<Chart Config="_config1" @ref="_chart1" Height="400px"></Chart>

<hr />

<h3>Code</h3>

<p>
    This is the component to add in your page.
</p>

<CodeSnippet Language="Language.xml" Style="Style.VisualStudio">
    &ltChart Config="_config1" &#64;ref="_chart1">&lt;Chart>
</CodeSnippet>

<p>
    Then, in the code section, add the following code:
</p>

<CodeSnippet Language="Language.csharp" Style="Style.VisualStudio" LoadMainScript="false">
private BarChartConfig? _config1;
private Chart? _chart1;

_config1 = new LineChartConfig()
    {
        Options = new Options()
        {
            Responsive = true,
            MaintainAspectRatio = false,
            Animations = new Animations()
            {
                Tension = new Tension()
                {
                    Duration = 1000,
                    Easing = "linear",
                    From = 1,
                    To = 0,
                    Loop = true
                }
            },
            Scales = new Dictionary&lt;string, Axis&gt;()
            {
                {
                    Scales.YAxisId, new Axis()
                    {
                        Min = 0,
                        Max = 100
                    }
                }
            }
        }
    };

_config1.Data.Labels = LineDataExamples.SimpleLineText;
_config1.Data.Datasets.Add(new LineDataset()
    {
        Label = "Looping tension",
        Data = AnimationExamples.SimpleLine.ToList(),
        BorderColor = Colors.PaletteBorder1.FirstOrDefault(),
        Fill = false
    });
</CodeSnippet>

@code {
    private LineChartConfig? _config1;
    private Chart? _chart1;

    protected override async Task OnInitializedAsync()
    {
        _config1 = new LineChartConfig()
            {
                Options = new Options()
                {
                    Responsive = true,
                    MaintainAspectRatio = false,
                    Animations = new Animations()
                    {
                        Tension = new Tension()
                        {
                            Duration = 1000,
                            Easing = "linear",
                            From = 1,
                            To = 0,
                            Loop = true
                        }
                    },
                    Scales = new Dictionary<string, Axis>()
                    {
                        {
                            Scales.YAxisId, new Axis()
                            {
                                Min = 0,
                                Max = 100
                            }
                        }
                    }
                }
            };

        _config1.Data.Labels = LineDataExamples.SimpleLineText;
        _config1.Data.Datasets.Add(new LineDataset()
            {
                Label = "Looping tension",
                Data = AnimationExamples.SimpleLine.ToList(),
                BorderColor = Colors.PaletteBorder1.FirstOrDefault(),
                Fill = false
            });
    }
}